{% block doc %}
<!DOCTYPE html>
<html lang="zh-CN">
{% block html %}

<head>
    {% block head %}
    <title>
        {% block title %}
        Todo
        {% endblock title %}
    </title>

    {% block metas %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    {% endblock metas %}

    {% block styles %}

    <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='image/favicon.png') }}">
    <link href="{{ url_for('static', filename='font-awesome/4.7.0/css/font-awesome.css') }}" rel="stylesheet">

    <style>
        h1 {
            background: #2980b9;
            color: white;
            margin: 0;
            padding: 10px 20px;
            text-transform: uppercase;
            font-size: 24px;
            font-weight: normal;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            background: #fff;
            height: 40px;
            line-height: 40px;
            color: #666;
        }

        li:nth-child(2n) {
            background: #f7f7f7;
        }


        span {
            background: #e74c3c;
            height: 40px;
            width: 40px;
            margin-right: 20px;
            text-align: center;
            display: inline-block;
            color: white;
            transition: 0.2s linear;
            opacity: 1.0;
        }



        li:hover span {
            width: 40px;
            opacity: 1.0;
        }

        input {
            font-size: 18px;
            background: #f7f7f7;
            width: 100%;
            padding: 13px 13px 13px 20px;
            box-sizing: border-box;
            color: #2980b9;
            border: 3px solid rgba(0, 0, 0, 0);
        }

        input:focus {
            background: #fff;
            border: 3px solid #2980b9;
            outline: none;
        }

        #container {
            width: 360px;
            margin: 100px auto;
            background: #f7f7f7;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        }

        .fa-plus {
            float: right;
        }

        .completed {
            color: gray;
            text-decoration: line-through;
        }
    </style>

    {% endblock styles %}
    {% endblock head %}
</head>

<body{% block body_attribs %}{% endblock body_attribs %}>
    {% block body %}

    {% block content %}
    {% endblock content %}

    {% block scripts %}
    <script src="{{ url_for('static', filename='jquery/3.3.1/jquery.min.js')}}"></script>
    <script>
        //Checking Off Specific Todos By Clicking
        //ul lerin icindeki butun li-lara aid olur. gelecek elementlerde buradadir
        $("ul").on("click", "li", function () {
            //new version
            $(this).toggleClass("completed")

            //old version
            // //if li is gray
            // if($(this).css("color") == "rgb(128, 128, 128)") {
            // 	$(this).css({
            // 		color: "black",
            // 		textDecoration: "none" 
            // 	})
            // } else {
            // 	//property names as string
            // 	// $(this).css({
            // 	// 	"color": "gray",
            // 	// 	"text-decoration": "line-through" 
            // 	// })

            // 	$(this).css({
            // 		color: "gray",
            // 		textDecoration: "line-through" 
            // 	})
            // }
        })


        //Click on X to delete Todos
        //ul lerin icindeki butun spanlara aid olur. gelecek elementlerde buradadir
        $("ul").on("click", "span", function (event) {
            $(this).parent().fadeOut(500, function () {
                $(this).remove()
            })
            event.stopPropagation()
        })

        //Add new todos
        $("input[type='text']").keypress(function (event) {
            if (event.which === 13) {
                var todoText = $(this).val()
                if (todoText.length > 0) {
                    $(this).val("")
                    $("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
                }
            }
        })

        $(".fa-plus").click(function () {
            $("input[type='text']").fadeToggle()
        })


    </script>
    {% endblock scripts %}

    {% endblock body %}
    </body>

    {% endblock html %}

</html>
{% endblock doc %}